<template>
  <div class="container">
    <a-card style="height: calc(100vh - 105px);">
      <div style="display: flex;justify-content: space-between;">
        <a-row style="min-height: 0.9rem; font-size: 0.4rem; margin-bottom: 15px">
          <a-col :span="0">
            <a-icon type="search"></a-icon>
          </a-col>
          <a-col :span="24">
            <a-input-search placeholder="搜索" enter-button v-model:value="searchName" @search="onSearch" />
          </a-col>
        </a-row>
        <div class="action_group">
          <a-button type="primary" @click="handleAdd">添加</a-button>
        </div>
      </div>

      <a-table bordered :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.dataIndex === 'action'">
            <span style="color: #1890ff;cursor: pointer;" @click="handleCheck(record)">详情</span>
            <span style="margin: 0 20px;opacity: .3;">|</span>
            <span style="color: red;cursor: pointer;" @click="handleDelete(record)">删除</span>
          </template>
          <template v-if="column.dataIndex === 'base_database_read_write'">
            <span>{{ text === 1 ? '只读' : '读写' }}</span>
          </template>
          <template v-if="column.dataIndex === 'app_database_read_write'">
            <span>{{ text === 1 ? '只读' : '读写' }}</span>
          </template>
        </template>
      </a-table>
      <a-modal v-model:visible="visible" footer="" style="width: 800px;" :maskClosable="false">
        <div style="height: 500px;overflow-x: hidden;">
          <a-descriptions title="数据详情" layout="vertical" bordered>
            <a-descriptions-item>
              <div v-for="item in datakey" class="showModelData_item">
                <span v-if="item.label !== '密码'">{{ item.label }}</span>
                <span v-if="item.label === '密码'">{{ item.label }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item>
              <div v-for="(item, i) in dataval" class="showModelData_item">
                <span v-if="i !== 'database_password' && i !== 'app_database_read_write' && i !== 'base_database_read_write'">{{
                  item ? item : '无' }}</span>
                <span v-if="i === 'database_password'">*********</span>
                <span v-if="i === 'app_database_read_write' || i === 'base_database_read_write'">{{ item === 1 ? '只读' :
                  '读写'
                }}</span>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-modal>
      <add ref="refadd" @getApplicationList="getApplicationList" style="display: none;"></add>
      <div style="position: absolute;bottom: 25px;right: 25px;">
        <a-pagination v-model:current="current" @change="handlePagination" :total="pageTotal" :hideOnSinglePage="true"
          style="float: right;" />
        <span v-if="pageTotal > 10"
          style="float: right;font-size: 16px;line-height: 32px;margin-right: 25px;color: rgb(65, 65, 65);">共{{
            pageTotal }}条数据</span>
      </div>
    </a-card>
  </div>
</template>
  
<script setup>
import { ref, createVNode, onMounted, nextTick } from "vue";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { applicationList, deleteApplication, applicationData } from '@api/application.js'
import add from "@views/createApplication/add.vue";
let loading = ref(false)
const selected = ref([]);
const applicationlist = ref([])
const searchName = ref('')
const pageTotal = ref()
const current = ref(1)
const pagesize = ref(10)
const refadd = ref(null)
function handlePagination(page, pageSize) {
  console.log(page, pageSize)
  current.value = page
  pagesize.value = pageSize
  loading.value = true
  getApplicationList()
  loading.value = false
}
const columns = [
  {
    title: "序号",
    width: '80px',
    align: 'center',
    dataIndex: "index",
  },
  {
    title: "系统名称",
    width: '150px',
    align: 'center',
    dataIndex: "system_name",
  },
  {
    title: "数据库账号",
    width: '150px',
    align: 'center',
    dataIndex: "database_account",
  },
  {
    title: "创建时间",
    width: '150px',
    align: 'center',
    dataIndex: "create_time",
  },
  {
    title: "数据库权限",
    width: '150px',
    align: 'center',
    dataIndex: "base_database_read_write",
  },
  {
    title: "应用数据库名称",
    width: '150px',
    align: 'center',
    dataIndex: "app_db_name",
  },
  {
    title: "应用数据库权限",
    width: '150px',
    align: 'center',
    dataIndex: "app_database_read_write",
  },
  {
    title: "操作",
    width: '150px',
    align: 'center',
    dataIndex: "action",
  },
];
const data = ref([]);
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    selected.value = selectedRows;
    console.log(selectedRows)
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User",
    name: record.name,
  }),
};
function handleAdd() {
  refadd.value.visible = true
  refadd.value.formState.system_name = ''
  refadd.value.formState.database_account = ''
  refadd.value.formState.database_password = ''
  refadd.value.formState.app_db_name = ''
}
function handleDelete(record) {
  console.log(record.key)
  Modal.confirm({
    title: "确定删除？",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    cancelText: "取消",
    async onOk() {
      await deleteApplication(record.key)
      message.success('删除成功')
      await getApplicationList()
      Modal.destroyAll()
    },
    onCancel() {
      console.log("点击取消");
    },
  });
}
const visible = ref(false)
const datakey = ref([])
const dataval = ref([])
function handleCheck(record) {
  visible.value = true
  applicationList({}, 'OPTIONS').then(res => {
    datakey.value = res.data.fields
  })
  applicationData(record.key, 'GET').then(res => {
    console.log(res)
    dataval.value = res.data
  }).catch(err => {
    console.log(err)
  })
}
function onSearch() {
  getApplicationList()
}
function getApplicationList() {
  data.value = []
  applicationList({ page: current.value, limit: pagesize.value, search: searchName.value }, 'GET').then(res => {
    pageTotal.value = res.data.count
    applicationlist.value = res.data
    console.log(applicationlist.value)
    // 添加数据
    applicationlist.value.results.forEach((v, i) => {
      data.value.push({
        key: v.id,
        index: (current.value - 1) * pagesize.value + i + 1,
        system_name: v.system_name,
        database_account: v.database_account,
        create_time: v.created_time,
        base_database_read_write: v.base_database_read_write,
        app_db_name: v.app_db_name,
        app_database_read_write: v.app_database_read_write,
      })
    })
  })
  loading.value = false
}
onMounted(() => {
  getApplicationList()
})
</script>
  
<style lang="less" scoped>
.container {
  height: calc(100vh - 65px);
  padding: 20px;

  .action_btn {
    margin-right: 15px;
  }

}

.showModelData_item {
  width: 100%;
  text-align: center;
  padding: 5px;
}

.showModelData_item:nth-child(odd) {
  background-color: rgb(240, 240, 240);
}

::v-deep .ant-modal-body {
  width: 500px !important;
}

::v-deep .ant-descriptions-item-content {
  padding: 0 !important;
}

::v-deep .ant-table {
  height: calc(100vh - 250px);
  overflow: auto;
}
</style>
  